<!-- 合同详情 -->
<template>
    <p-PageCard v-bind="pageCardConfig" class="contract-details-page-con" :showHelp="true">
      <div slot="header" class="contract-details-page-header">
        {{pageTitle}}  <a-button @click="back">返回</a-button>
      </div>
      <div class="body">
        <a-spin tip="正在加载..." size="large" :spinning="pageLoading">
          <!-- <div class="spin-content">
            我的描述文案是自定义的。。。
          </div> -->
        </a-spin>
        <a-tabs v-model="defaultActiveKey" @change="tabChangeEvent" style="width:100%;">
          <a-tab-pane :key="pageItem.key" :tab="pageItem.tabName" v-for="(pageItem,index_) in currentPageConfig" >
            <div class="preview-con" v-if="pageConfigList[pageItem.configName] && pageConfigList[pageItem.configName].ppsConfig">
              <p-PreviewShow v-if="pageConfigList[pageItem.configName].ppsConfig.url"  :key="pageItem.configName" :showHelp="false" :model="pageConfigList[pageItem.configName].ppsConfig.model"  :config="pageConfigList[pageItem.configName].ppsConfig.config" :url="pageConfigList[pageItem.configName].ppsConfig.url" :event="modalEvent" ></p-PreviewShow>
              <div v-else style="width: 100%; height: 100%;">   <a-empty /></div>
            </div>
            <div class="form-con">
              <template v-if=" pageConfigList[pageItem.configName].groupConfig.show==true ">

                <a-collapse v-if=" pageConfigList[pageItem.configName].groupConfig.dataSize>=1" v-model="pageConfigList[pageItem.configName].groupConfig.collapseActionKey">
                  <a-collapse-panel :key="(index+1)+''" :header="groupItem.groupCode" v-for="(groupItem,index) in pageConfigList[pageItem.configName].formDataList" :forceRender="true">
                    <div :id="`collapse-panel-${index_}-${index}`"  :key="'collapse-panel-'+index_" v-for="(itemKey,index_) in Object.keys(groupItem.dataList)">
                      <div class="form-title" :id="`PPageForm${index}${index_}`">{{itemKey}}</div>

                      <p-PageForm :showHelp="false" :ref="`PPageForm${index}${index_}`" :formDataList="groupItem.dataList[itemKey]" :layout="pageConfigList[pageItem.configName].formLayout" :formRules="pageConfigList[pageItem.configName].formRules">
                        <template v-slot:[key]="{value, itemData}" v-for="(key) in Object.keys(pageItem.formComponent)">
                          <component :is="pageItem.formComponent[key]" v-model="value" v-bind="itemData.attr || {}" :agreeId="bizId_" :flowCode="flowCode_"></component>
                        </template>
                      </p-PageForm>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
                <!-- ===={{pageConfigList[pageItem.configName].groupConfig.dataSize==1}} -->
                <!-- v-if="pageConfigList[pageItem.configName].groupConfig.dataSize==1" -->
                <template v-else v-for="(groupItem,index) in pageConfigList[pageItem.configName].formDataList">
                  <div :id="`collapse-panel-${index_}-${index}`" :key="'collapse-panel-'+index_" v-for="(itemKey,index_) in Object.keys(groupItem.dataList)">
                    <div class="form-title" :id="'PPageForm'+index_">{{itemKey}}</div>
                    <p-PageForm  :ref="'PPageForm'+index_" :formDataList="groupItem.dataList[itemKey]" :layout="pageConfigList[pageItem.configName].formLayout" :formRules="pageConfigList[pageItem.configName].formRules">
                      <template v-slot:[key]="{value, itemData}" v-for="(key) in Object.keys(pageItem.formComponent)">
                        <component :is="pageItem.formComponent[key]" v-model="value" v-bind="itemData.attr || {}" :agreeId="bizId_" :flowCode="flowCode_"></component>
                      </template>
                    </p-PageForm>
                  </div>
                </template>

              </template>



              <p-PageForm v-if="pageConfigList && pageConfigList[pageItem.configName] && pageConfigList[pageItem.configName].groupConfig && pageConfigList[pageItem.configName].groupConfig.show == false" :ref="'PPageForm'+index_" :formDataList="pageConfigList[pageItem.configName].formDataList" :layout="pageConfigList[pageItem.configName].formLayout" :formRules="pageConfigList[pageItem.configName].formRules">
                <template v-slot:[key]="{value, itemData}" v-for="(key) in Object.keys(pageItem.formComponent)">

                  <component :is="pageItem.formComponent[key]" v-model="value" v-bind="itemData.attr || {}"  :agreeId="bizId_" :flowCode="flowCode_"></component>
                </template>
              </p-PageForm>


              <a-button :key="'action-btn-'+index" :id="item.key" v-for="(item,index) in pageConfigList[pageItem.configName].btnList" :type="item.type" @click.prevent="btnEvent(item)" class="form-btn">
                {{item.label}}
              </a-button>

            </div>
          </a-tab-pane>

        </a-tabs>



<!--
        终止后的合同重新发起签署  v-if="agreeStatus=='6'"  v-has="'con_acm:add:btn090'"
      状态 1待签约、2已邮寄（纸质版）、3已签约、4已失效、5已中止，6已终止，7已过期，8待生效 -->
      <!-- <a-button v-if="agreeStatus=='6'" v-has="'con_acm:add:btn09'" type="primary" @click="reissueSigningEvent" style="margin: 20px 0;">重新发起签署</a-button> -->
      </div>

      <!-- 终止后的合同重新发起签署 -->
      <!-- <a-modal
        title="重新发起签署"
        :visible="ReissueSigningConfig.visible"
        :footer="null"
        :width="800"
        @cancel="handleCancel"
      >
      <AgreeContractZj :actionType="ReissueSigningConfig.actionType" :agreeId="ReissueSigningConfig.agreeId" :flowCode="ReissueSigningConfig.flowCode"></AgreeContractZj>
      </a-modal>  -->

    </p-PageCard>
  </template>

  <script>

  import contractDetailsEvent from './utils'

  export default {
    // import引入的组件需要注入到对象中才能使用
    name: 'contractDetailsNew',
    props: {
      // 业务类型
      // 审核类型 1：合同审核；2：续签审核；3：补充协议审核；4：中止审核；5：中止申诉审核；6：解除终止审核；7：终止审核
      actionCode: {
        type: String,
        // required: true
      },
      // 合同id
      bizId: {
        type: String,
        // required: true
      },
      agreeId: {
        type: [String,Number],
        // required: true
      },
      flowCode: {
        type: String,
        // required: true
      },
      flowNo: {
        type: String,
        // required: true
      },
      // 此参数为默认值参数（默认值：'sh'），表示从待审核里过来的
      status: {
        type: [String,Number],
        // required: true
      },
    },
    data() {
      return {
        pageLoading:false,
        // 重新发起签署 数据配置
        ReissueSigningConfig:{
          visible:false,
          actionType:'1',
          agreeId:'',
          flowCode:''
        },
        agreeStatus:'',
        PageParam:{},
        flowCode_: '50000004',
        bizId_: '1203',

        pageCardConfig:{
          isCardBorder:true,
          // 此参数可选 头部下的边框
          isHeadBottomBorder:true,
          // 此参数可选 card-body 的样式 class
          bodyClass:'body-con',
          // 此参数可选 card-body 的样式 style
          bodyStyle: {width:'100%'},
        },
        pageTitle:'合同XXX',
        defaultActiveKey:'xqxy01',
        currentPageConfig:[
          {
            "key":"xqxy01",
            "tabName":"测试",
            "configName":"c1Config",
            "formComponent":{"userName5":"SelectTemplate"},
            "defaultActive":true
          },
          // {
          //   "key":"xqxy02",
          //   "tabName":"合同详情2",
          //   "configName":"c11Config",
          //   "formComponent":{"userName5":"SelectTemplate"},
          //   "defaultActive":false
          // },
          // {
          //   "key":"xqxy3",
          //   "tabName":"合同详情3",
          //   "configName":"default2",
          //   "formComponent":{"userName5":"SelectTemplate"},
          //   "defaultActive":true
          // },
        ],
        pageConfigList:{
          c1Config:{
            // 顶部pdf
            ppsConfig:{
              model:'page',
              config:{title:'',visible: false, loading: false, width: '50vw',height: '60vh' },
              url:''
            },
            groupConfig:{
              show:true,
              dataSize:1,
              collapseActionKey:'1'
            },
            formLayout:{ rowNum: 4, columnNum: 2, rowGap: "0px", rowHeight:'50px', coliumnGap: "0px", labelCol: { span: 4 }, wrapperCol: { span: 14 }, },
            formRules:{},
            formDataList:[
              {"enName":"signName","cnName":"企业名称","type":"label","value":"文禄渠道6271","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
              {"enName":"agreeName","cnName":"合同名称","type":"label","value":"新灵活用工合作协议（襄阳园区）42-45","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
            ],
            btnList:[{key:'XQ001',disabled:false, label:'提交审核',type:'primary'},]
          },
          // c1Config:{
          //   // 顶部pdf
          //   ppsConfig:{
          //     model:'page',
          //     config:{title:'',visible: false, loading: false, width: '50vw',height: '60vh' },
          //     url:tempUrl1
          //   },
          //   groupConfig:{
          //     show:true,
          //     dataSize:2,
          //     collapseActionKey:'1'
          //   },
          //   formLayout:{ rowNum: 4, columnNum: 2, rowGap: "0px", rowHeight:'50px', coliumnGap: "0px", labelCol: { span: 4 }, wrapperCol: { span: 14 }, },
          //   formRules:{},

          //   formDataList:[
          //     {
          //         "groupCode":"202120000",
          //         "dataList":{
          //           "合同信息":[
          //             {"enName":"signName","cnName":"企业名称","type":"label","value":"中雄（荆州）信息公司北京分公司","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //             {"enName":"agreeName","cnName":"合同名称","type":"label","value":"业务合作协议B端线上枣阳园区","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //             {"enName":"agreeNo","cnName":"合同编号","type":"label","value":"DOC_02_1002202311161622520009","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //             {"enName":"agreeCategory","cnName":"业务类型","type":"label","value":"灵工业务","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //             {"enName":"agreeEnableTime|agreeExpireTime","cnName":"合同有限期","type":"label","value":"2023-11-16~2024-11-16","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //             {"enName":"modelName","cnName":"合同模板","type":"label","value":"业务合作协议B端线上枣阳园区","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}}
          //           ]
          //         }
          //       },
          //     {
          //       groupCode:'2021202',
          //       dataList:{
          //         '合同终止':[
          //           {"enName":"signName","cnName":"企业名称","type":"label","value":"文禄渠道6271","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //           {"enName":"agreeName","cnName":"合同名称","type":"label","value":"新灵活用工合作协议（襄阳园区）42-45","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //         ],
          //         '测试':[
          //           {"enName":"signName","cnName":"企业名称","type":"label","value":"文禄渠道6271","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //           {"enName":"agreeName","cnName":"合同名称","type":"label","value":"新灵活用工合作协议（襄阳园区）42-45","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //         ],
          //       }
          //     },
          //     {
          //       groupCode:'2021204',
          //       dataList:{
          //         '合同终止1':[
          //           {"enName":"signName","cnName":"企业名称","type":"label","value":"文禄渠道6271","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //           {"enName":"agreeName","cnName":"合同名称","type":"label","value":"新灵活用工合作协议（襄阳园区）42-45","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //         ]
          //       }
          //     },
          //   ],
          //   btnList:[{key:'XQ001',disabled:false, label:'提交审核',type:'primary'},]
          // },
          // default2:{
          //   // 顶部pdf
          //   ppsConfig:{
          //     model:'page',
          //     config:{title:'',visible: false, loading: false, width: '50vw',height: '60vh' },
          //     url:tempUrl2
          //   },
          //   groupConfig:{
          //     show:true,
          //     dataSize:1,
          //     collapseActionKey:'1'
          //   },
          //   formLayout:{ rowNum: 4, columnNum: 2, rowGap: "0px", rowHeight:'50px', coliumnGap: "0px", labelCol: { span: 4 }, wrapperCol: { span: 14 }, },
          //   formRules:{},
          //   formDataList:[
          //     {
          //       groupCode:'2021202',
          //       dataList:{
          //         '合同终止':[
          //           {"enName":"signName","cnName":"企业名称","type":"label","value":"文禄渠道6271","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //           {"enName":"agreeName","cnName":"合同名称","type":"label","value":"新灵活用工合作协议（襄阳园区）42-45","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //         ],
          //         '测试':[
          //           {"enName":"signName","cnName":"企业名称","type":"label","value":"文禄渠道6271","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //           {"enName":"agreeName","cnName":"合同名称","type":"label","value":"新灵活用工合作协议（襄阳园区）42-45","numRowsOccupied":1,"numColumnOccupied":1,"formItemAttr":{},"itemAttr":{}},
          //         ],
          //       }
          //     },
          //   ],

          //   btnList:[{key:'XQ001',disabled:false, label:'提交审核',type:'primary'},]
          // },
        },



      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {
      // defaultActiveKey: {
      //   handler(val) {
      //     this.pageEvent('tabChangeEvent',val)
      //   },
      //   deep: true,
      //   immediate: true
      // },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      console.log('this.ContractFlowCode====>',this.ContractFlowCode);

      this.init()
    },
    // 方法集合
    methods: {
      //返回
      back(){
        this.$router.push({
          path: '/infoManagement/infoManagementDetails',
          query: {
            pagetab: 6   //跳转我的合同页签
          }
        })
      },
      pageEvent(type, ...args) {
        return contractDetailsEvent(type, this, ...args)
      },
      init(){
        this.pageLoading = true
        this.pageEvent('pageInit')
      },
      tabChangeEvent(activeKey){
        console.log('tab事件====》',activeKey);
        this.pageEvent('tabChangeEvent',activeKey)
      },
      modalEvent(){},
      reissueSigningEvent(){
        this.ReissueSigningConfig.flowCode = 'CM001'
        this.ReissueSigningConfig.visible = true
      },
      handleCancel(){
        this.ReissueSigningConfig.visible = false
      },
      btnEvent(item){
        console.log('校验==》',this.$refs,this.currentPageConfig,item);
        this.pageEvent('btnEvent',item)
        // this.currentPageConfig.forEach((item,index)=>{
        //   this.$nextTick(()=>{
        //     console.log('校验 1==》','PPageForm'+index);
        //     this.$refs['PPageForm'+index] &&this.$refs['PPageForm'+index][0]&& (this.$refs['PPageForm'+index][0].onSubmit((formRes)=>{
        //       console.log('校验==》',formRes,item,index);
        //     }))
        //   })
        // })
      },
    },
    }
  </script>
  <style lang='less' >
  .contract-details-page-con{
    box-sizing: border-box;
    .contract-details-page-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .body-con{
      padding: 20px 30px;
      .body{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        .swiper {
          width: 100%;
          // height: 300px;
        }
        .preview-con{
          width: 100%;
          height: 500px;
          margin-bottom: 5px;
          padding: 5px 40px;
        }
        .form-con{
          width: 100%;
          margin-top: 5px;
          padding: 0 30px;
          .form-title{
            color: #333333;
            font-size: 15px;
            font-weight: bold;
          }
          .p-page-form-con{
            width: 100%;
            border-top: 1px solid #d9d9d9;
            border-left: 1px solid #d9d9d9;
            margin-bottom: 10px;
            display: inline-grid;
            // grid-template-rows: 1fr;
            grid-template-rows: none;
            gap: 0px 0px;
            justify-content: center;
            grid-auto-flow: row;


            .item{
              border-right: 1px solid #d9d9d9;
              border-bottom: 1px solid #d9d9d9;
              padding: 5px 0;
            }
          }
          .form-btn{
            margin: 10px 5px;
          }
        }
        .approve-con{
          width: 100%;
          height: 300px;
          .box{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  </style>

